<template>
  <div class="card-wrap">
    <a-card hoverable>
      <!-- 图片部分 -->
      <template #cover>
        <img class="card-image" :src="image" alt="卡片图片" />
      </template>

      <!-- 内容部分 -->
      <a-card-meta>
        <template #title>
          <a-typography-text class="card-title">{{ title }}</a-typography-text>
        </template>
        <template #description>
          <a-typography-paragraph class="card-description" ellipsis :rows="2">
            {{ description }}
          </a-typography-paragraph>
        </template>
      </a-card-meta>

      <!-- 操作按钮部分 -->
      <template #actions>
        <a-space size="large" class="action-icons">
          <a-button type="text" @click="toggleLike">
            <icon-heart :style="{ color: liked ? '#ff4d4f' : '' }" />
            {{ likes }}
          </a-button>
          <a-button type="text" @click="toggleStar">
            <icon-star :style="{ color: starred ? '#faad14' : '' }" />
            {{ stars }}
          </a-button>
          <a-button type="text" @click="toggleShare">
            <icon-share-internal :style="{ color: shared ? '#1890ff' : '' }" />
            {{ shares }}
          </a-button>
        </a-space>
      </template>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref, defineProps } from 'vue';

  // 接收 props
  const props = defineProps({
    title: String,
    description: String,
    image: String,
    likes: Number,
    stars: Number,
    shares: Number,
  });

  // 状态管理
  const liked = ref(false);
  const starred = ref(false);
  const shared = ref(false);

  // 点赞功能
  const toggleLike = () => {
    liked.value = !liked.value;
  };

  // 收藏功能
  const toggleStar = () => {
    starred.value = !starred.value;
  };

  // 分享功能
  const toggleShare = () => {
    shared.value = !shared.value;
  };
</script>

<style scoped lang="less">
  .card-wrap {
    .card-image {
      width: 100%;
      height: 160px;
      object-fit: cover;
      border-radius: 4px;
    }
    &:hover {
      transform: translateY(-4px);
    }

    .card-title {
      font-size: 16px;
      font-weight: bold;
    }

    .card-description {
      font-size: 14px;
      color: #666;
    }

    .action-icons {
      display: flex;
      justify-content: space-around;
    }
  }
</style>
